<template>
	<view class="popup">
		<view style="width: 40rpx; height: 40rpx;" @click.stop="shopCart(item)">
			<image :src="Domain_ICON+'/shopcart.png'" mode="" class="img" style="">
			</image>
		</view>
		<!-- 购物车 -->
		<popUp type="top" bgColor="#fff" :show='shopcart' @Close="()=>{shopcart=false}" Height="70">
			<view class="shopcart flex ml-3" style="width: 70%;">
				<view class="getValue" :data-Article_SerialNumber="good.Article_SerialNumber"
					:data-quantity="good.quantity"
					:data-Unit_Price="good.specifications[0]?good.specifications[0].Unit_Price:''">
				</view>
				<view class="py-3" style="width:270rpx;height: 270rpx;">
					<image :src="Domain_IMG+good.Picture_URL" mode="aspectFit" class="img"></image>
				</view>
				<!-- 商品规格只有一个时 -->
				<view class="ml-2 flex flex-column justify-end pb-4" style="width: 200rpx;"
					v-if="good.hasOwnProperty('specifications')&&good.specifications.length==1">
					<money :money="good.specifications[0].Sales_Unit_Price"></money>
					<view class="font-sm" style="color: #ccc;">
						<text>剩余{{good.specifications[0].Stock_Remain}}件</text>
					</view>
				</view>
				<!-- 商品规格大于一个时 -->
				<view class="ml-2 flex flex-column justify-end pb-4" style="width: 200rpx;"
					v-if="good.hasOwnProperty('specifications')&&good.specifications.length>1">
					<!-- 未选中时显示 -->
					<view class="" v-if="JSON.stringify(selectSpe)=='{}'">
						<view class="flex">
							<money :money="minPrice"></money>-
							<money :money="maxPrice"></money>
						</view>
		
						<view class="font-sm" style="color: #ccc;">
							<text>剩余{{totalRemain}}件</text>
						</view>
						<view class="font-sm" style="color: #ccc;">
							<text>请选择 购买规格</text>
						</view>
					</view>
					<!-- 选中时显示 -->
					<view class="" v-else>
						<money :money="selectSpe.Sales_Unit_Price"></money>
						<view class="font-sm" style="color: #ccc;">
							<text>剩余{{selectSpe?selectSpe.Stock_Remain:''}}件</text>
						</view>
						<view class="font-sm" style="color: #ccc;">
							<text>已选 {{selectSpe.Specifications_Name}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-column mx-3" v-if="good.specifications.length>1">
				<view class="">
					购买规格
				</view>
				<view class="flex">
					<view class="mr-2 rounded-lg flex justify-center align-center" :class="{'speActive':item.isSelect}"
						@click="speClick(item,index)" v-for="(item,index) in good.specifications" :key="index"
						style="background-color: rgb(247,248,250);width: 130rpx;height: 60rpx;">
						<view>
							{{item.Specifications_Name}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex justify-between mx-3 mt-3">
				<view class="font">购买数量</view>
				<view class="">
					<counter :num="good.quantity"
						:max="Number(good.specifications[0]?good.specifications[0].Stock_Remain:'')"
						@Count="counterClick">
					</counter>
				</view>
			</view>
			<view class="shop-cart position-fixed flex justify-center font text-white "
				style=" bottom:20rpx; margin:0 auto">
				<button class="btn-left text-white" :disabled="loading" @click="addCart()">加入购物车</button>
				<button class="btn-right text-white" @click="buyNow()">立即购买</button>
			</view>
		</popUp>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				Domain_ICON:app.globalData.Domain_ICON,
				
			}
		},
		props: {
			title: {
				type: String,
				default: ""
			}
		},
		methods: {
			
		},
	}
</script>

<style lang="scss">
	
</style>